这几天刚更新了NexT主题，一直在修改细节，终于从5.1.x的版本更新到了6.0.x的版本，nodeJS和NPM也做了更新。本着
互联网共享精神，我在这里将
如何搭建Hexo+NexT博客和如何规范化写作+构建+push的流程
做详细整理。
本人目前常用
Mac。以下配置对于 Windows，Linux
自行参考。
安装Hexo
安装node.js
如果你已经安装了node.js，请忽略。
访问node.js官网，根据指引进行安装。
安装Git
如果你已经安装了Git，请忽略。
访问Git官网，根据指引进行安装。
由于众所周知的原因，Windows从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。
安装Hexo
-
国内的朋友，因为众所周知的原因，从npm直接安装hexo会非常慢，所以你需要用到镜像源，参考上面的步骤，使用cnpm命令行工具代替默认的npm: 在windows控制台（cmd）里输入并执行
npm install -g cnpm --registry=https://registry.npm.taobao.org，然后安装hexo:cnpm install -g hexo-cli -
国外的朋友，请直接打开windows控制台，输入
npm install -g hexo-cli并执行。
建站
建立本地博客文件夹
在命令行执行如下命令，其中<folder>为文件夹路径
1 |
hexo init <folder> |
示例
1 |
hexo init C:/hexo/myblog |
以下步骤均采用这个路径作为说明，并且
所有有关hexo的命令 均要在此路径下执行。
建立好后文件夹目录如下
1 |
. |
其中
_config.yml：博客的配置文件，可以在此配置大部分的参数。package.json：应用程序的信息。EJS, Stylus和Markdown renderer 已默认安装，您可以自由移除。package.json 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-server": "^0.2.0"
}
}- scaffolds：模板文件夹，当您新建文章时，Hexo会根据scaffold来建立文件。
- source：资源文件夹，存放用户资源的地方。除
_posts文件夹之外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown和HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。 - themes：主题文件夹。Hexo会根据主题来生成静态页面。
- node_modules：node.js模块，一些 插件 和 依赖 会被安装到这里。
更加详细的解释请参考hexo官方文档
安装NexT主题
进入本地博客文件夹并将NexT主题clone至themes文件夹下
1 |
cd C:/hexo/myblog |
接着，进入./themes/next/文件夹，将
隐藏文件夹
.git删除。这一步是为了后面将网站源码push到github上的
必要工作。
你会看到，在next下也有一个_config.yml的文件，这是
NexT主题的配置文件，为了区别它和
博客配置文件，下面会用带路径的文件名来描述它们：
myblog/_config.yml：博客配置文件next/_config.yml：主题配置文件
启用NexT主题
在myblog/_config.yml里theme:选项填next，=>theme:
next，注意冒号后空一格。
到这里，建站的任务就完成了。你现在可以打开控制台，输入并执行如下命令：
1 |
cd C:/hexo/myblog |
其中
hexo g：新建public文件夹，并在其中生成网站静态文件（html，css，等文件）hexo s：启动hexo服务器，默认情况下，访问网址为：http://localhost:4000/
你会看到控制台有如下输出：
1 |
INFO Start processing |
在浏览器地址栏输入http://localhost:4000/并访问，你应该会看到如下页面：
恭喜你！你已经完成了博客搭建的主要工作！接下来就是细节的配置了。请耐心阅读以下内容。
配置博客配置文件
整个myblog/_config.yml的内容如下：
1 |
# Hexo Configuration |
博客基础配置
这里是配置博客基础的地方，包括
博客名，小标题，描述，站长名（你的昵称），语言，时区。
1 |
# Site |
下面是我的配置：
1 |
# Site |
你可以参考一下 哪项配置分别对应哪个位置，其中language:
zh-Hans这里是根据
主题是否支持
来设置的，因为渲染的js和css等文件都在主题里。NexT主题支持的语言参考这里。hexo默认使用您计算机设置的时区。更改时区请参考时区列表，比如如果您想换成
纽约时区，您需填America/New_York。
博客url配置
这里是配置你的博客 链接格式 的，包括 主站
和
文章 链接。
1 |
# URL |
这是我的配置：
1 |
url: https://tankeryang.github.io |
这里我的博客链接是https://tankeryang.github.io，因为我是挂在github上的。root设置为/。如果你的博客是在
子目录
下，如http://yoursite.com/child，你需这样设置：
1 |
url: http://yoursite.com/child |
接着是permalink的配置，hexo默认的是:year/:month/:day/:title/的格式。比如我点开博客搭建好之后的默认博文
Hello
World，它的链接是这样的：http://localhost:4000/2018/01/22/hello-world/：
如果你想 更改文章永久链接格式 的话，以下是和链接格式有关的变量，你可以根据以下变量来配置：
| 变量 | 描述 |
|---|---|
:year |
文章的发表年份（4 位数） |
:month |
文章的发表月份（2 位数） |
:i_month
|
文章的发表月份（去掉开头的零） |
:day |
文章的发表日期 (2 位数) |
:i_day |
文章的发表日期（去掉开头的零） |
:title |
文件名称 |
:id |
文章 ID |
以下内容更新于2018/1/24，承接上文
配置资源文件夹
资源（Asset）代表source文件夹中除了文章以外的所有文件，例如图片、CSS、JS
文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images
文件夹中。然后通过类似于的方法访问它们。
如果你想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将config.yml文件中的post_asset_folder选项设为true来打开：
1 |
post_asset_folder: true # 设置为true |
设置为true后，当你新建一篇文章时，hexo同时会新建一个
和文章标题一样名字
的文件夹，你的文章所引用的图片等资源就可以放在这里面了。
将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过标签插件来引用它们，这样你就得到了一个更简单而且方便得多的工作流。关于什么是标签插件，接下来的内容会说明。请耐心阅读。（你也可以点击上面的链接浏览一下标签插件的内容）
以下内容更新于2018/1/25，承接上文（不好意思，本人很懒…）
写作
新建文章
执行如下命令新建文章：
1 |
hexo new [layout] <title> |
其中[layout]字段是文章的
布局，默认为post，可以通过修改_config.yml中的default_layout参数来指定默认布局。<title>则是文章标题。
布局
Hexo
有三种默认布局：post、page和draft，它们分别对应不同的路径，而您
自定义的其他布局
和post相同，都将储存到source/_posts文件夹。
| 布局 | 路径 |
|---|---|
post |
source/_posts |
page |
source |
draft |
source/_draft |
其实布局我到现在也不是很清楚是什么，我是这样认为的：
如果你执行了这条命令hexo new post "new
article"，hexo会新建一个new
article.md文件在source/_post文件夹下。同理，其他两个布局参照上面的路径新建文章。
文件名称
Hexo默认以 标题
作为文件名称，你也可编辑myblog/_config.yml中的new_post_name参数来改变默认的文件名称，比如设置为：
1 |
new_post_name: :year-:month-:day-:title.md # File name of new posts |
这样在 文章名 前面就会加上日期和时间共同组成 文件名。
下面是一些可用来配置文件名的变量：
| 变量 | 描述 |
|---|---|
:title |
标题（小写，空格将会被替换为短杠） |
:year |
建立的年份,比如，2015 |
:month |
建立的月份（有前导零），比如，04 |
i_month
|
建立的月份（无前导零），比如，4 |
:day |
建立的日期（有前导零），比如，07 |
i_day |
建立的日期（无前导零），比如，7 |
下面，我们就来尝试一下吧！
首先，执行
1 |
hexo new post "caonima" |
你会看到输出
1 |
INFO Created: C:/hexo/myblog/source/_posts/caonima.md |
同时，在source/_post文件夹下多了caonima.md文件和caonima文件夹。
1 |
. |
打开caonima.md，你会看到这些
1 |
|
这些是
front-matter，下面我会对它进行说明，请耐心阅读（这句话我到底讲了几次）。
接下来你可以随便在里面写点内容，比如：
1 |
# caonima |
保存。执行下面语句生成博客文件并运行本地hexo服务端：
1 |
hexo g && hexo s |
你会看到如下输出：
1 |
INFO Start processing |
在浏览器输入http://localhost:4000/并访问，你会看到这样的页面：
恭喜你！你已经可以进行简单的文字创作了！下面的任务就是让你的写作流程规范化的细节。请耐心阅读。
标签插件
从上方跳转过来的朋友， 点此返回资源配置文件夹处
标签插件是用于在文章中快速插入特定内容的插件。
它的在文章中用法一般是这样：
1 |
{% [某种标签] %} |
或者这样：
1 |
{% [某种标签] <你想插入的内容> %} |
用例子说明最快：
比如像前面提到的，用标签插件在文章引用图片，你只需这样写
1 |
{% asset_img <图片文件名> %} |
示例
1 |
{% asset_img caonima.jpg %} |
这是我最常用的标签了，asset_img，顾名思义，就是图片资源。一般我都用它来插入图片。因为我们在前面配置了
资源文件夹，所以<图片文件名>这里我们不用输入绝对路径，只需输入图片文件名
就ok了，hexo会自动在资源文件夹里寻找你的图片。
你可以在caonima文件夹里放一张图片，然后在caonima.md里用上面的asset_img标签插件来引用它，看看效果。
配置主题配置文件
NexT主题作为hexo众多主题里最火的一款，除了简约美观的设计之外，最重要的一点就是 可定制化的程度高。你可以很轻松的 开启或关闭某些功能，甚至 自己尝试添加一些功能也比其他主题简单，因为它的 源文件组织得很清晰，主题的 布局，js，css，字体，语言，等文件都独立区分。
下面我会参照我的配置来详细介绍如何配置NexT主题。
重要更新
在v6.0.x的版本里，NexT新增了
缓存
这样一个特性：
1 |
# Allow to cache content generation. Introduced in NexT v6.0.0. |
这是一个非常强大的改进！也就是说，当我们执行了hexo s预览博客内容时，同时对
文章内容 或
主题配置 做了一些修改，我们只需 刷新一下
页面就能实时看到更改效果，而不用重新执行hexo clean && hexo
g来重新生成页面。对此我只能说666666
网站图标
下面就是网站图标的配置项：
1 |
# For example, you put your favicons into `hexo-site/source/images` directory. |
参照注释，先在myblog/source/路径下新建images文件夹，找一张16x16的ico或者png图标，放进images文件夹（在哪里找图标请自行百度），比如caonima.ico。
然后将small选项设置为/images/caonima.ico：
1 |
favicon: |
再将其他的选项注释掉（因为基本用不到）：
1 |
favicon: |
网站图标配置就完成了。关于其他选项你可以有空自己放些图标文件来玩玩看什么效果。
网站底部内容
这些在footer选项的配置里：
1 |
footer: |
默认图标是user。假如你想个性化的话可以参照fontawsome提供的图标来进行选择。下面是我的配置：
1 |
footer: |
菜单栏设置
这些在menu选项里：
1 |
# --------------------------------------------------------------- |
||后面的icon对应的是fontawsome相应的图标名。如果你想添加about菜单的话，按照以下步骤：
- 在
myblog下新建about文件夹 - 在
about文件夹下新增index.md文件 - 在
index.md里添加内容 - 在
menu选项里添加about: /about/ || user
刷新一下看看效果。你会发现多了一个about菜单。用这样的办法可以自定义很多菜单目录。
主题布局
NexT主题提供了4种不同风格的主题布局，按需设置：
1 |
# --------------------------------------------------------------- |
侧边栏设置
这一项的内容有点多，先放配置文件，我们一个个看：
1 |
# --------------------------------------------------------------- |
social: 这一项被注释掉了，我们先取消注释。配置内容就是对应的社交账号链接。github_banner: 右上角的 follow me on githublinks: 放一些友情链接或其它的你想放的链接avatar: 头像的一些设置
其余的设置参考他给出的注释说明配置即可。下面是我的配置：
1 |
# --------------------------------------------------------------- |
个性化设置
因为NexT可配置的选项太多，在这里我就不一一展开了，下面在介绍两个个性化的设置
主题标签插件
关于标签插件，大家可以回顾一下前面的内容。NexT也自带了一些标签插件供用户使用
note
提示块标签，效果就像你看到的这个提示块
配置如下：
1 |
# Note tag (bs-callout). |
使用方法：
1 |
{% note class %} |
label
label标签，给文字加底色配置如下：
1 |
# Label tag. |
使用方法：
1 |
{% label class@Text %} |
选项卡
效果如下：
我是选项卡1
1 |
我是代码框1 |
我是选项卡2
1 |
我是代码框2 |
配置如下：
1 |
# Tabs tag. |
使用方法：
1 |
{% tabs 选项卡1 选项卡2 %} |
配置Git与Travic-CI持续集成
这一步是最能体现 自动化博客写作流程 的关键。务必仔细阅读。
github，gitee，coding新建博客项目
在github上新开一个repo，repo名:
USERNAME.github.io
同理，coding
repo名:
USERNAME， gitee repo名:
USERNAME
USERNAME为你的github，gitee，coding用户名
pages服务参考：github，coding，gitee
添加.gitignore
进入myblog文件夹，新增.gitignore文件，若存在则检查是否与如下一致：
1 |
.DS_Store |
设置travis关联USERNAME.github.io
-
先用github账号登陆travis
-
勾选你的博客项目，顺便点旁边的setting进入设置，参照图2来勾选：
为博客项目设置deploy key
这一步比较重要，这是travis能否访问你的repo的关键。按照下面的步骤配置：
-
在
myblog下新建一个.travis文件夹，并进入.travis文件夹 -
在
myblog/.travis下生成一个专门给travis用的ssh key:
执行ssh-keygen -t rsa -f travis_rsa -C "your@email.com"，遇到密码输入直接enter回车，email记得替换 -
github博客项目添加travis_rsa.pub公钥
将.travis下的travis_rsa.pub的内容复制，按下图进入Add deploy key界面，将内容粘贴，并勾选可读写权限（一定不要遗漏!!!）
-
coding过程同上
-
gitee因为项目的
deploy key不能设置可写入权限，所以只能将travis_rsa.pub添加到个人的公钥
加密travis_rsa
-
先安装gem（关于ruby，gem相关的安装这里就不列出来了，我相信你的动手能力:)）
-
接着安装travis命令行工具:
sudo gem install travis -
装好后，进入
myblog/.travis文件夹，在当前路径下执行如下命令：1
2travis login --auto
travis encrypt-file travis_rsa -add
需要注意的是，travis命令行工具貌似在Windows下不太好使…因此需要换另外的方法使得travis能访问到github，coding和gitee上的博客项目，主要是通过 token 来访问。相关的配置百度一下就有很多教程，比ssh来的更简单。就是在 安全 性上差了一点，因为 token 是有操作所有 repo 的权限的…
加密完成后你会发现.travis文件夹下多了个travis_rsa.enc的文件，这个就是加密后的travis_rsa。同时myblog下也多了.travis.yml文件。下面我们就配置一下.travis.yml。
-
先将
.travis下的travis_rsa，travis_rsa.pub删掉。请记住一定要删掉！！！只保留加密文件 -
按照下面配置
.travis.yml:.travis.yml 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61language: node_js
node_js: stable
branches:
only:
- dev
before_install:
# 解密SSH
# encrypted_key和encrypted_id可以在travis里setting查看，具体位置参考下图
- openssl aes-256-cbc -K ${你的encrypted_xxxx_key} -iv ${你的encrypted_xxxx_iv}
-in .travis/travis_rsa.enc -out ~/.ssh/travis_rsa -d
- chmod 600 ~/.ssh/travis_rsa
- mv -fv .travis/config ~/.ssh/config
# 安装hexo以及一些插件，没用到的可移除相关命令
install:
- npm install hexo-cli -g
- npm install hexo-math --save
- npm install hexo-generator-searchdb --save
- npm install hexo-symbols-count-time --save
- npm install hexo-generator-feed --save
- npm install hexo-wordcount --save
- npm install mermaid --save
- npm install hexo-tag-mermaid --save
- npm install hexo-tag-plantuml --save
# 安装next主题插件，没用到的可移除相关命令
before_script:
- cd ./themes/next
- git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
- git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload
- git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
- git clone https://github.com/theme-next/theme-next-pace source/lib/pace
- git clone https://github.com/theme-next/theme-next-pangu.git source/lib/pangu
- git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress
- cd ..
- cd ..
# 构建博客
script:
- hexo -version
- hexo clean && hexo g
after_script:
# 设置环境
- set -ev
- export TZ='Asia/Shanghai'
- cd ./public
# 提交
- git config user.name "USERNAME" # 你的github用户名
- git config user.email "your@email.com" # 你的github邮箱
- git init
- git add .
- git commit -m "Site updated:`date +"%Y-%m-%d %H:%M:%S"`"
# push
- git remote add coding git@git.coding.net:USERNAME/USERNAME.git # USERNAME为你的coding用户名
- git remote add gitee git@gitee.com:USERNAME/USERNAME.git # USERNAME为你的gitee用户名
- git push -u origin master -f
- git push -u coding master -f
- git push -u gitee master -f
最后，将你的本地博客目录与远程github博客项目关联
-
先初始化本地博客目录用git管理
1
2
3
4
5
6git init
git remote add origin git @github.com:USERNAME/USERNAME.github.io.git
git checkout -b dev
git add .
git commit -m "first commit"
git push -u origin dev -
上travis检查构建流程，看看是否有问题，有问题再根据日志进行
.travis.yml的修改 -
构建完成后，分享到朋友圈:)
-
之后写完文章只要
git push origin dev就ok了。注意要在dev分支下进行。可以通过git checkout dev切换分支
从年初开始写，一直到今天（2018-05-23）才写完…足以证明我是一个多么懒到没谱持之以恒的人，这样的博主还不赶快献爱心一个？
v1.5.2